<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圆角二次元</title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 200px;
				background-color: blue;
				/*圆角*/
				/*代表往两边走20px形成圆角
				border-radius: 20px;*/
				/*border-top-left-radius:20px;
				 border-top-right-radius:40px;
				 border-bottom-right-radius:60px;
				 border-bottom-left-radius:80px;*/
				border-radius: 20px 40px 60px 80px;
				/*
				 单独设置某个角的水平和垂直方向的值
				 第一个值表示水平方向的距离
				 第二个值表示竖直方向的值
				 两个值形成一个弧度
				 border-top-left-radius:20px 80px;
				 */
				
				/*
				 一个值,表示每个角都是20px
				 border-radius:20px
				 两个值,表示左上和右下20px，右上和左下40px
				 border-radius:20px 40px
				 三个值，表示左上，右上左下，右下
				 border-radius: 20px 80px 120px;
				 四个值，表示，左上，右上，右下，左下顺时针
				 border-radius: 20px 80px 120px 160px;
				 如果四个角的水平和竖直都不相同，需要8个值表示
				 前4个值表示左上角开始顺时针各个角的水平值
				 后4个值表示左上角开始顺时针各个角的竖直值
				 中间用/隔开
				 如果某些角的值相同，此方法可以简写成6个值，4个值或2个值
				 border-radius: 20px 80px 120px 160px/20px 80px 120px 160px;
				 * */
			}
			#div2{
				width: 400px;
				height: 200px;
				background-color:yellow;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>
